<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head :: head(links)"/>
<body>
<div class="ok-body" id="app" v-cloak>
    <template>
        <i-form label-colon ref="checkForm" :model="entity" :rules="ruleValidate" :label-width="120">
            <i-row>
                <i-col span="12">
                    <form-item  label="车主">
                        {{entity.nickname}}
                    </form-item>
                </i-col>
                <i-col span="12">
                    <form-item  label="手机号">
                        {{entity.mobile}}
                    </form-item>
                </i-col>
            </i-row>
            <i-row>
                <i-col span="12">
                    <form-item  label="车牌号">
                        {{entity.plateNumber}}
                    </form-item>
                </i-col>
                <i-col span="12">
                    <form-item  label="车位号">
                        {{entity.parkingLot}}
                    </form-item>
                </i-col>
            </i-row>
            <i-row>
                <i-col span="12">
                    <form-item prop="type" label="支付方式">
                        <radio-group  v-model="entity.type">
                            <radio v-for="item in payType" :label="item.value" :key="item.value">{{item.label}}</radio>
                        </radio-group>
                    </form-item>
                </i-col>
                <i-col span="12">
                    <form-item prop="totalFee" label="金额">
                        <i-input  v-model="entity.totalFee" placeholder="请输入金额"></i-input>
                    </form-item>
                </i-col>
            </i-row>
            <i-row>
                <i-col span="12">
                    <form-item prop="validityTime" label="有效期至">
                        <Date-Picker  v-model="entity.validityTime" type="datetime" format="yyyy-MM-dd" placeholder="有效期至" style="width: 200px"></Date-Picker>
                    </form-item>
                </i-col>
            </i-row>
            <i-row>
                <i-col span="24">
                    <form-item label="备注">
                        <i-input maxlength="200" v-model="entity.remark"  type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入备注"></i-input>
                    </form-item>
                </i-col>
            </i-row>
        </i-form>
    </template>
</div>
<div th:replace="common/foot :: foot(script)"></div>
<script th:inline="none">
var vm = new Vue({
    el: '#app',
    data:{
        entity:{
            status:1,
            orgName:'',
            orgId:null,
            parkManageId:null,
            parkManageName:''
        },
        payType:[{"label":"微信","value":0},{"label":"支付宝","value":1},{"label":"其它","value":2}],
        roleName:"",
        ruleValidate : {
            totalFee: [
				{ required: true, message: '不能为空', trigger: 'blur'}
			],
            type: [
				{ required: true, message: '不能为空', trigger: 'change',type: 'number' }
			],
			validityTime: [
				{ required: true, message: '不能为空', trigger: 'change',type: 'date' }
			],
		},
		okUtils:null,
		okLayer:null
    },
    methods: {
        load : function(){
            layui.use(["okUtils", "okLayer"], function () {
                 vm.okUtils = layui.okUtils;
                 vm.okLayer = layui.okLayer;
                 if(vm.entity.id!=undefined){
                     vm.okUtils.ajaxCloud({
                        url:"/car/manage/get",
                        param : {id:vm.entity.id},
                        close : false,
                        success : function(result) {
                            vm.entity = result.msg;
                            vm.entity.remark = "";
                        }
                     });
                 }
            });
	    },
        acceptClick : function(dialog){
          vm.entity.carId = vm.entity.id;
          vm.$refs.checkForm.validate(function(valid){
            if (valid) {
                 vm.okUtils.ajaxCloud({
                    url:"/car/manage/renew",
                    param : vm.entity,
                    json:true,
                    success : function(result) {
                        vm.okLayer.msg.greenTick(result.msg)
                        dialog.load();
                    }
                 });
            }
          });
	    }
    },
    created: function() {

    }
});
</script>
</body>
</html>